<template>
    <aside class="cus-color-picker m-b bt-line" v-if="mixinState.mSelectMode">
        <h4 class="cus-color-picker__title m-b">
            <span class="no-select">颜色板</span>
            <span class="color-picker__value">{{ selectColor }}</span>
        </h4>
        <section class="cus-color-picker__list">
            <span
                :class="['color-item cursor', {'is-active': currentIndex == index }]" 
                v-for="(item, index) in config.toolColor" 
                :key="index" 
                :style="{ background: item.value }"
                @click="onClick(item, index)">
            </span>
            <span :class="['color-item', {'is-active': currentIndex == -2 }]">
                <input 
                    class="color-input__picker cursor" 
                    v-model="selectColor" 
                    type="color" 
                    list=""
                    @input="onInput"/>
            </span>
        </section>
    </aside>
</template>

<script setup name="ColorPicker">
import useSharedCore from '@/hooks/shared';
import { config } from "../config/editor";

const { coverEditor, mixinState } = useSharedCore();
const selectColor = ref('#10AC84')
const currentIndex = ref(-1)

const emit = defineEmits(['on-change'])

const colorValue = defineModel({ type: String, default: () => "#10AC84" })
const allowSet = new Set(['triangle', 'circle', 'polygon', 'rect', 'ellipse'])

function onClick(item, index) {
    currentIndex.value = index
    onChange(item.value)
}

function onInput(params) {
    currentIndex.value = -2
    onChange(params.target.value)
}

function onChange(val) {
    const node = coverEditor?.canvas?.getActiveObject()
    colorValue.value = selectColor.value = val

    emit('on-change', val)
    // 根据类型进行填充颜色，线条类不做填充，只做边框
    if (node) {
        if (allowSet.has(node.type)) {
            node.set({ ['fill']: val })
        } else {
            node.set({ stroke: val, fill: null })
        }
        
        coverEditor.canvas.renderAll()
    }
}

</script>

<style lang="scss" scoped>
@mixin insetColor {
    box-shadow: 0 0 0 1px #8b3dff, inset 0 0 0 2px #8b3dff,inset 0 0 0 4px #fff;
}

.cus-color-picker {
    --size: 30px;
    padding-bottom: 12px;
    &__title {
        font-size: 14px;
        .color-picker__value {
            margin-left: 12px;
            border: 1px solid #eee;
            border-radius: 4px;
            padding: 4px 5px;
        }
    }
    &__list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: minmax(var(--size), auto);
        place-items: center;
        column-gap: 8px;
        row-gap: 8px;
        .color{
            &-item {
                align-self: center;
                border-radius: 5px;
                width: var(--size);
                aspect-ratio: 1 / 1;
                overflow: hidden;
                box-shadow: 1px 0px 5px 3px $gray;
                transition: all 0.3s ease;
                position: relative;
                &.is-active {
                    @include insetColor();
                }
                &:hover, &:focus-visible {
                    @include insetColor();
                }
                &:active, &:focus-visible {
                    @include insetColor();
                }
                input[type="color"] {
                    border: none;
                    background: none;
                    -webkit-appearance: none;
                    appearance: none;
                    border-width: 0px;
                    border-style: none;
                    outline: none;
                }
                /* 移除 WebKit 浏览器的箭头和默认边框 */
                input[type="color"]::-webkit-color-swatch-wrapper {
                    padding: 0;
                    border: none;
                }
                input[type="color"]::-webkit-color-swatch {
                    border: none;
                }
                input[type="color"]::-moz-color-swatch {
                    border: none;
                }
                /* 针对 Microsoft Edge 和 Internet Explorer */
                input[type="color"]::-ms-expand {
                    display: none;
                }
            }
            &-input__picker {
                width: 100%;
                height: 100%;
                position: relative;
                &::before {
                    content: "+";
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 30px;
                    color: #eee;
                }
            }
        }
    }
}
</style>